<template>
  <TableBox :data="data" @searchBtn="searchBtn">
    <template #item="{ row }">
      <div class="itemBorder" @click.stop="selectBtn(row)">
        <dl class="flex-start-start">
          <dt>
            <ElImgBox :data="row.productColorDraftFileList[0]" :urlList="row.productColorDraftFileList"
              urlKey="draftFileUrl" :width="100" />
          </dt>
          <dd>
            <h3>{{ row.productName }}</h3>
            <div>
              <p>产品类型：{{ row?.productTypeName || '--' }}</p>
              <p>产品类型：{{ `V${row?.updateVersion ? row.updateVersion + 1 : 1}` }}</p>
              <p>产品尺寸：{{ row?.productSize || '--' }}</p>
              <p>标签数量：{{ row?.productTagNumber || 0 }}{{ row?.productUnit || '' }}</p>
            </div>
          </dd>
        </dl>
      </div>
    </template>
  </TableBox>
</template>
<script setup lang="ts">
const { proxy } = getCurrentInstance() as any;
const props = withDefaults(
  defineProps<{
    data?: any;
  }>(),
  {

  },
);
const options = reactive({
  customer: [],//客户
})
const emit = defineEmits<{
  //fn为父组件引入子组件是定义的子组件事件属性，可随意定义
  (event: 'selectBtn', row: any): void;
  (event: 'searchBtn'): void;
}>();
const selectBtn = (row: any) => {
  emit('selectBtn', row)
};
const searchBtn = () => {
  emit('searchBtn')
};
onMounted(() => {
});
onUnmounted(() => { });
</script>
<style scoped lang="scss"></style>
